<template>
	<div class="app">
		<header class="header">
			<h1 class="title">积分商城-端午特惠</h1>
		</header>

		<main class="main">
			<section>
				<view class="card">
					<view class="card_header">
						<view class="card_header-content">
							<text class="card_header-content-title">用户名：{{nickName}}</text>
						</view>
						<view class="card_header-extra">
							<text class="card_header-extra-text">可用积分：{{point}}</text>
						</view>
					</view>
				</view>
			</section>
			<section class="products">
				<div class="product" v-for="(product, index) in goodsList" :key="product.id">
					<div class="product-image" @click="goToPage(product)">
						<img :src="product.imageUrl" :alt="product.name">
					</div>
					<div class="product-info">
						<h2 class="product-title">{{ product.name }}</h2>
						<p class="product-price">库存：{{ product.inventory }}份</p>
						<button class="exchange-btn" @click="goToPage(product)">兑换</button>
					</div>
				</div>
			</section>
		</main>

		<footer class="footer">
			<p>&copy; 2023. All rights reserved.</p>
		</footer>

	</div>
</template>

<script>
	//引入积分商品列表查询接口
	import {
		goodlistGet
	} from '../../api/index.js'

	export default {
		data() {
			return {
				goodsList: [],
				cart: [],
				point: '',
				nickName: ''
			}
		},
		methods: {
			// 查询积分商品列表
			getGoodlist() {
				goodlistGet({
						"desc": false,
						"page": 1,
						"pageSize": 12,
					})
					.then(response => {
						this.goodsList = response.data.data.items
						console.log(response.data.data.items);
					})
					.catch(error => {
						console.log(error)
					})
			},
			// 个人信息展示
			getInformation() {
				// 从缓存中获取nickName、point
				this.nickName = uni.getStorageSync('nickName');
				this.point = uni.getStorageSync('point');
			},
			// 跳转到商品详情
			goToPage(product) {
				// 把 productId 放入缓存
				this.productId = product.id;
				uni.setStorageSync('productId', this.productId);
				uni.navigateTo({
					url: '/pages/pointsMall/goodDetail'
				})
			}
		},
		// 微信小程序专属生命周期函数：页面加载时触发
		onLoad() {
			wx.setNavigationBarTitle({
				title: '积分商城'
			});
			// 查询积分商品列表
			this.getGoodlist(); // 注意要加上 "this." 来引用对象内的方法
			// 展示个人信息
			this.getInformation();
		}
	}
</script>

<!-- CSS 样式 -->
<style scoped>
	/* 添加了<style scoped>标签并将所有样式规则前面加上.card以实现样式的范围化。这样，在组件中使用这段代码时，样式规则将只会应用于当前组件的元素，而不会影响到其他组件的元素。 */
	* {
		box-sizing: border-box;
	}

	html,
	body {
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;
		font-size: 16px;
	}

	.header {
		text-align: center;
		padding: 30rpx 0 20rpx;
		background-color: #fff;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		text-transform: uppercase;
		color: #4CAF50;
	}

	.main {
		background-color: #f5f5f5;
		padding: 30rpx 20rpx;
	}

	.products {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
		grid-auto-rows: minmax(400rpx, auto);
		justify-content: center;
		grid-gap: 20rpx;
	}

	.product {
		background-color: #fff;
		border-radius: 5rpx;
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}

	.product:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.product-image {
		position: relative;
		width: 100%;
		padding-top: 100%;
		/* padding-bottom 设置图片元素的高度为 100%，，以确保它与宽度保持一致，这样图片高度与宽度的比例将保持为 1:1，为正方形 */
		overflow: hidden;
	}

	.product-image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* object-fit: cover; */
		object-fit: contain;
		/* 按比例缩放以适应容器大小 */
	}

	.product-info {
		padding: 20rpx;
		text-align: center;
	}

	.product-title {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #333;
	}

	.product-price {
		margin-top: 5rpx;
		font-size: 16rpx;
		color: #888;
	}

	.exchange-btn {
		display: inline-block;
		margin-top: 10rpx;
		font-size: 16rpx;
		background-color: #4CAF50;
		color: #fff;
		border: none;
		border-radius: 5rpx;
		padding: 8rpx 12rpx;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}

	.exchange-btn:hover {
		background-color: #3e8e41;
	}

	.footer {
		text-align: center;
		padding: 20rpx 0;
		background-color: #eee;
		font-size: 14rpx;
	}

	/* 弹窗样式 */
	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}

	.dialog-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.dialog-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 500rpx;
		background-color: #fff;
		border-radius: 5rpx;
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		text-align: center;
	}

	.dialog-title {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #333;
	}

	.exchange-info {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: left;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.exchange-item {
		margin-bottom: 10rpx;
	}

	.exchange-item-title {
		display: inline-block;
		width: 100rpx;
		font-size: 16rpx;
		color: #888;
	}

	.exchange-item-value {
		display: inline-block;
		font-size: 16rpx;
		color: #4CAF50;
	}

	.dialog-btns {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.cancel-btn,
	.confirm-btn {
		display: inline-block;
		font-size: 16rpx;
		color: #888;
		border: none;
		border-radius: 5rpx;
		padding: 8rpx 12rpx;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}

	.cancel-btn:hover,
	.confirm-btn:hover {
		color: #fff;
	}

	.cancel-btn {
		background-color: #ccc;
		margin-right: 10rpx;
	}

	.confirm-btn {
		background-color: #4CAF50;
	}

	.card {
		padding: 0 10px;
		/* background: -webkit-linear-gradient(top, #c9f2cc, #4CAF50); 从上到下渐变*/
		background-color: #fff;
		border-radius: 5rpx;
		box-shadow: 0 5rpx 10rpx rgba(0, 170, 0, 0.3);
		overflow: hidden;
		margin-bottom: 20rpx;

	}

	.card .card_header {
		display: flex;
		border-bottom: 1px #EBEEF5 solid;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		overflow: hidden;
	}

	.card .card_header .card_header-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		overflow: hidden;
	}

	.card .card_header .card_header-content .card_header-content-title {
		padding: 10px 0px 10px 10px;
		font-size: 15px;
		color: #3a3a3a;
	}

	.card .card_header .card_header-content .card_header-content-subtitle {
		padding: 0px 0px 0px 10px;
		font-size: 12px;
		margin-top: 5px;
		color: #909399;
	}

	.card .card_header .card_header-extra {
		font-size: 12px;
		color: #909399;
	}
</style>
